/* Nav Bar */
	.grid-3 {
		padding:0;
		display: grid;
		grid-template-columns: 33.333% 33.333% 33.333%;
		max-height:70vh;
		margin-top:2em;
	}
	.grid-3 .nav-but {
		width:100%;
		margin:auto;
		text-align:center;
		aspect-ratio:1;
		position: relative;
    transition: 0.4s;
    z-index:10;
	}
	.grid-3 .nav-but#math-button{
		background:var(--math);
	}
	.grid-3 .nav-but#vib-button{
		background:var(--vib);
	}
	.grid-3 .nav-but#acs-button{
		background:var(--acs);
	}
	.grid-3 .nav-but p{
		padding:0;
		width:100%;
		color:white;
		font-weight:bold;
		font-size:1.75em;
		margin: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.grid-3 .nav-but#math-button:hover{
		background:var(--math-dark);
		transform: translateY(-6%);
		cursor:pointer;
    box-shadow:0 10px 10px gray;
    z-index:9;
    border-radius:25px;
	}
	.grid-3 .nav-but#vib-button:hover{
		background:var(--vib-dark);
		transform: translateY(-6%);
		cursor:pointer;
    box-shadow:0 10px 10px gray; 
    z-index:9;  
    border-radius:25px;
	}
	.grid-3 .nav-but#acs-button:hover{
		background:var(--acs-dark);
		transform: translateY(-6%);
		cursor:pointer;
    box-shadow:0 10px 10px gray;
    z-index:9;
    border-radius:25px;
	}
	
	@media (max-width: 600px),
	       (max-height:600px){
    div.grid-3 {
			grid-template-columns: 100%;
			max-height:none;
		}
		.grid-3 > div.nav-but {
			width:95%;
			margin:auto auto;
		}
		.grid-3 .nav-but#math-button:hover{
			opacity: 1;
			transform: translateY(0);
		}
		.grid-3 .nav-but#vib-button:hover{
			opacity: 1;
			transform: translateY(0);
		}
		.grid-3 .nav-but#acs-button:hover{
			opacity: 1;
			transform: translateY(0);
		}
	}


/* About */
  section#about h1 {
    border-radius:10px;
    padding:0.5em 0.1em 1.25em 0.1em;
    margin:1em auto -1em auto;
    width:80vw;
    background:yellow;
    box-shadow:0 0 100px #F90 inset;
  }
  section#about div {
    background-color:#FFE;
    margin:auto;
    width:75vw;
    border-radius:10px;
    padding:1em 2em;
    box-shadow:0 0 10px black;
  }
  section#about p{
    text-indent:3em;
    padding:0;
  }
  section#about img {
    object-fit:scale-down;
    border-radius:10px;
    border:solid 1px black;
    float:left;
    box-shadow:0 0 10px black;
  }

   @media (max-width: 600px){
    h1{
     font-size: 2em;
    }
    section#about h1{
      width:90vw;
    }
    section#about div {
      width:85vw;
    }
   }
   
   @media (max-width: 900px){
    section#about h1{
      width:85vw;
    }
    section#about div {
      width:80vw;
    }
   }
   

section#about img#reagan{
  max-height:20em;
  margin-right:1em;
  float:left;
}
section#about img#guitar{
  max-height:10em;
  margin-right:1em;
  float:right;
}

/* Home Page */
  main h1 {
    border-radius:10px;
    padding:0.5em 0.1em 1.25em 0.1em;
    margin:0.25em auto -1em auto;
    width:70vw;
    background:var(--acs-light);
    box-shadow:0 0 100px var(--acs-dark) inset;
  }
  h2{
    font-family: "Times New Roman", serif;
    font-size:1.5em;
    margin:0.5em;
    text-align:center;
    cursor:inherit;
  }
  a.card {
    text-decoration:none;
    color:black;
    display:block;
    background-color:lavender;
    width:60vw;
    margin:10px auto;
    border-radius:10px;
    padding:0.5em;
    cursor:pointer;
    box-shadow:0 0 10px black;
  }
  a.card:hover {
    box-shadow:0 0 13px black;
  }
  div.card-grid {
    padding:0;
    display:grid;
    grid-template-columns: auto auto auto;
  }
  div.card-grid p{
    padding-left:0.5em;
  }
  div.card-divider{
    display:inline-block;
    background:grey;
    border-radius:3px;
    width:3px;
    height:92%;
    relative:absolute;
    right:0;
    margin:5px 30px;
  }
  p.card-info{
    padding:0 1em;
    text-indent:2em;
    font-size:0.8em;
    margin:0 1em;
  }
  div.card-demo{
    float:right;
    padding:2%;
    height:20vh;
  }
  div.card-demo img{
    height:100%;
    width:100%;
    border-radius:10px;
    box-shadow: 0 0 10px black;
    object-fit:contain;
  }


/* Header */
nav {
  color: white;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  background-image:linear-gradient(var(--main),var(--main-light));
  box-shadow:0 3px 5px var(--main);
  width:100%;
  height:10vh;
  position:fixed;
  top:0;
  padding-left:0.5em;
  padding-top:0.25em;
  user-select:none;
}
nav:hover {
  box-shadow:0 4px 5px var(--main);
}
div#header-spacer {
  height:10vh;
}
/* Links */

nav h1{
  display:inline;
  font-size: 3em;
  margin:0.02em 0 0 0.25em;
}
nav small{
  margin-right:0.5em;
}
nav a em{
  color:white;
  font-size: 1.5em;
  text-decoration:none;
}
nav a em:hover{
  color:gray;
}


/* SVG */
nav svg#animated-logo {
  background:#56F;
  border-radius:20%;
  float:left;
  margin-top:0.15em;
  height:85%;
  /* box-shadow:0 0 15px var(--main-light) inset; */
}

/* Hat */
#logo-hat {
  animation: hat-slide 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes hat-slide {
  from {d:path("M10,25 q20,-20,40,0 q20,20,40,0")}
  to {d:path("M10,25 q20,20,40,0 q20,-20,40,0")}
}
nav:hover #logo-hat{
  animation-play-state: running;
}

/* Thighs */
#logo-left-thigh {
  animation: left-thigh-slide 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes left-thigh-slide {
  from {d:path("M 26 25 q 4 -3 8 0 v 9 q -4 -2 -8 0 z")}
  to {d:path("M 26 44 q 4 1 8 0 v 8 q -4 -2 -8 0 z")}
}
#logo-right-thigh {
  animation: right-thigh-slide 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes right-thigh-slide {
  from {d:path("M 66 44 q 4 1 8 0 v 8 q -4 -2 -8 0 z")}
  to {d:path("M 66 25 q 4 -3 8 0 v 9 q -4 -2 -8 0 z")}
}

/* Calves */
#logo-left-calf {
  animation: left-calf-slide 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes left-calf-slide {
  from {d:path("M 26 60 q 4 2 8 0 v 30 h -8 z")}
  to {d:path("M 26 78 q 4 2 8 0 v 12 h -8 z")}
}
#logo-right-calf {
  animation: right-calf-slide 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes right-calf-slide {
  from {d:path("M 66 78 q 4 2 8 0 v 12 h -8 z")}
  to {d:path("M 66 60 q 4 2 8 0 v 30 h -8 z")}
}
nav:hover #logo-right-calf {
  animation-play-state: running;
  fill:#999;
}
nav:hover #logo-left-calf {
  animation-play-state: running;
  fill:#999;
}
nav:hover #logo-right-thigh {
  animation-play-state: running;
  fill:#999;
}
nav:hover #logo-left-thigh {
  animation-play-state: running;
  fill:#999;
}

/* Knees */
#logo-left-knee {
  animation: left-slide 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes left-slide {
  from {transform: translate(0,0)}
  to {transform: translate(0,18px)}
}
#logo-right-knee {
  animation: right-slide 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes right-slide {
  from {transform: translate(0,0)}
  to {transform: translate(0,-18px)}
}
nav:hover #logo-right-knee{
  animation-play-state: running;
  stroke:yellow;
}
nav:hover #logo-left-knee {
  animation-play-state: running;
  stroke:red;
}